<template>
  <div class="building-Box">
    <div class="resource-manage">
      <div class="card-box">
        <div class="card-title">楼栋信息</div>
        <el-form ref="building" :model="propForm.building" class="form-wrap" label-position="top" size="small" :rules="building_rules">
          <el-form-item label="楼栋名称" prop="buildingName">
            <el-input v-model="propForm.building.buildingName" placeholder="请输入楼栋名称"></el-input>
          </el-form-item>
          <!-- <el-form-item label="不动产单元号" prop="unitNum">
                        <el-input v-model="propForm.building.unitNum" placeholder="请输入不动产单元号"></el-input>
          </el-form-item>-->
          <el-form-item label="所属项目" prop="selectProject">
            <el-select @change="changeProject" v-if="current === '10'" v-model="propForm.building.selectProject" placeholder="请选择所属项目">
              <el-option v-for="item in allProject" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <el-input v-model="propForm.projectName" v-else readonly class="in_txt"></el-input>
          </el-form-item>
          <!--<el-form-item label="配套设施物业名称" prop="facilitiesName" v-if="current === '20'">
            <el-input v-model="propForm.facilitiesName" readonly class="in_txt"></el-input>
          </el-form-item>-->
          <!--  <el-form-item label="项目竣工时间" prop="completeTime">
                        <el-date-picker
                            v-model="propForm.building.completeTime"
                            type="date"
                            value-format="yyyy-MM-dd"
                            format="yyyy-MM-dd"
                            placeholder="选择日期"></el-date-picker>
          </el-form-item>-->

          <!-- <el-form-item label="房屋性质" prop="roomType">
                        <el-input maxlength="20" v-model="propForm.building.roomType" placeholder="请输入房屋性质"></el-input>
                      &lt;!&ndash;  <el-select v-model="propForm.building.roomType" placeholder="请选择房屋性质">
                            <el-option
                                v-for="item in houseTypes"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>&ndash;&gt;
          </el-form-item>-->
          <!--<el-form-item label="建构价款(元)" prop="buildPrice">
                        <el-input v-model="propForm.building.buildPrice" placeholder="请输入建构价款">
                        </el-input>
          </el-form-item>-->
          <el-form-item label="建筑面积(m²)" prop="floorArea">
            <el-input v-model="propForm.building.floorArea" placeholder="请输入建筑面积"></el-input>
          </el-form-item>
          <el-form-item label="地上建筑面积(m²)" prop="groundArea">
            <el-input v-model="propForm.building.groundArea" placeholder="请输入地上建筑面积"></el-input>
          </el-form-item>
          <el-form-item label="地下建筑面积(m²)" prop="undergroundArea">
            <el-input v-model="propForm.building.undergroundArea" placeholder="请输入地下建筑面积"></el-input>
          </el-form-item>
          <el-form-item label="总套数(套)" prop="totalSets">
            <el-input v-model="propForm.building.totalSets" placeholder="请输入总套数"></el-input>
          </el-form-item>
          <el-form-item label="是否独栋" prop="isDetachedHouse">
            <el-radio v-model="propForm.building.isDetachedHouse" label="0">否</el-radio>
            <el-radio v-model="propForm.building.isDetachedHouse" label="1">是</el-radio>
          </el-form-item>

          <el-form-item v-show="propForm.building.isDetachedHouse == 0" label="单元/楼座" prop="unitBuilding">
            <el-row>
              <el-col :span="12">
                <el-radio v-model="propForm.building.unitBuilding" label="0">无</el-radio>
                <el-radio v-model="propForm.building.unitBuilding" label="1">有</el-radio>
              </el-col>
              <el-col :span="12">
                <el-input
                  type="text"
                  v-show="propForm.building.unitBuilding == 1"
                  maxlength="5"
                  v-model="propForm.building.unitSize"
                  placeholder="请输入"
                  @blur="handleuUnitSize"
                >
                  <template slot="suffix">单元/座</template>
                </el-input>
              </el-col>
            </el-row>
          </el-form-item>
          <!--<el-form-item label="管理权属" prop="manageUnit">
                        <el-select v-model="propForm.building.manageUnit" placeholder="请选择管理所">
                            <el-option
                                v-for="item in manageUnits"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="街道" prop="buildStreet" >
                        <el-select v-model="propForm.building.buildStreet" filterable placeholder="请选择街道">
                            <el-option
                                v-for="item in streets"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="社区" prop="communityName" >
                        <el-select v-model="propForm.building.communityName" filterable placeholder="请选择社区">
                            <el-option
                                v-for="item in communityName"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
          </el-form-item>-->
          <el-form-item label="物业地址" prop="cityCode" class="full">
            <el-row :gutter="10">
              <el-col :span="4">
                <el-select placeholder="请选择市" v-model="propForm.building.cityCode">
                  <el-option v-for="item in cityAssembly" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-col>
              <el-col :span="5">
                <el-select placeholder="请选择区(县)" v-model="propForm.building.countyCode" @change="handleChangeCountyCode">
                  <el-option
                    v-for="item in (this.propForm.building.cityCode === '') ? [] : districtCollection"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-col>
              <el-col :span="5">
                <el-select placeholder="请选择街道(乡)" v-model="propForm.building.buildStreet" @change="handleChangeStreet">
                  <el-option
                    v-for="item in (this.propForm.building.countyCode === '') ? [] : streets"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-col>
              <el-col :span="5">
                <el-select placeholder="请选择社区(村)" v-model="propForm.building.communityName">
                  <el-option
                    v-for="item in (this.propForm.building.projectStreet === '') ? [] : communityNameStreet"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-col>
              <el-col :span="5">
                <el-input v-model="propForm.building.address" placeholder="请输入道路及门牌号"></el-input>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="地图坐标" style="position: relative;" prop="geographicCoordinates">
            <button type="button" @click="$refs.positionDialog.show()" style="position: absolute;top: -38px;left: 65px;">选择</button>
            <el-input v-model="propForm.building.geographicCoordinates" placeholder="请输入地图坐标" suffix-icon="el-icon-map-location"></el-input>
          </el-form-item>
          <el-form-item label="VR地址" prop="address">
            <el-input v-model="propForm.building.vrUrl" placeholder="请输入VR地址" maxlength="100"></el-input>
          </el-form-item>
          <!--<div class="col-two address-wrap">
                        <el-form-item label="地址" prop="provinceCode">
                            <el-select v-model="propForm.building.provinceCode" filterable @change="queryCitys"
                                       placeholder="请选择地址">
                                <el-option
                                    v-for="item in provinces"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item class="no-top-padding" >
                            <el-select v-model="propForm.building.cityCode" filterable @change="queryCounty"
                                       placeholder="请选择地址">
                                <el-option
                                    v-for="item in citys"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item  class="no-top-padding">
                            <el-select v-model="propForm.building.countyCode" filterable placeholder="请选择地址">
                                <el-option
                                    v-for="item in countys"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>

                    </div>
                    <el-form-item label="详细地址" prop="address">
                        <el-input v-model="propForm.building.address" placeholder="请输入详细地址"></el-input>
          </el-form-item>-->
          <el-form-item label="备注" prop="address" class="full">
            <el-input v-model="propForm.building.remarks" placeholder="请输入备注"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="resource-manage">
      <div class="card-box">
        <div class="card-title">楼层信息</div>
        <el-form ref="buildingFloor" :model="propForm.buildingFloor" class="form-wrap" size="small" :rules="buildingFloor_rules">
          <el-form-item label="地上层数(层)" prop="groundFloors">
            <el-input
              onkeyup="this.value=this.value.replace(/\D|^0/g,'')"
              maxlength="3"
              @change="generateFloor"
              v-model.number="propForm.buildingFloor.groundFloors"
              placeholder="请输入地上层数"
            ></el-input>
          </el-form-item>
          <el-form-item label="地下层数(层)" prop="undergroundFloors">
            <el-input
              onkeyup="this.value=this.value.replace(/\D|^0/g,'')"
              maxlength="3"
              v-model.number="propForm.buildingFloor.undergroundFloors"
              @change="undergroundGenerateFloor"
              placeholder="请输入地下层数"
            ></el-input>
          </el-form-item>
          <el-form-item label="总层数(层)" prop="totalFloors">
            <el-input maxlength="3" :readonly="true" ni v-model="propForm.buildingFloor.totalFloors" placeholder="请输入总层数"></el-input>
          </el-form-item>
        </el-form>

        <el-tabs tab-position="left" class="floorsStyle" @tab-click="handleClick">
          <el-tab-pane v-for="(item, index) in propForm.floors" :key="index">
            <span slot="label">
              <div class="item-title">{{item.actualFloor}}</div>
            </span>
            <el-row class="item">
              <el-form ref="floors" :model="propForm" class="form-wrap" size="small">
                <el-form-item label="层号">
                  <el-input maxlength="10" v-model="propForm.floors[index].floorNum" placeholder="请输入层号"></el-input>
                </el-form-item>
                <el-form-item label="实际层" :prop="'floors[' + index + '].actualFloor'">
                  <el-input maxlength="3" :readonly="true" v-model="propForm.floors[index].actualFloor" placeholder="请输入实际层"></el-input>
                </el-form-item>
                <el-form-item label="名义层" :prop="'floors[' + index + '].nominalFloor'">
                  <el-input maxlength="10" v-model="propForm.floors[index].nominalFloor" placeholder="请输入名义层"></el-input>
                </el-form-item>
                <el-form-item label="层建筑面积(m²)" :prop="'floors[' + index + '].buildingArea'">
                  <el-input
                    maxlength="14"
                    onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
                    v-model="propForm.floors[index].buildingArea"
                    placeholder="请输入层建筑面积"
                  ></el-input>
                </el-form-item>
                <!--  <el-form-item label="层套内面积(m²)" :prop="'floors[' + index + '].insideArea'" >
                                    <el-input maxlength="14" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" v-model="propForm.floors[index].insideArea" placeholder="请输入层套内面积">
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="层套内建筑面积(m²)" :prop="'floors[' + index + '].insideBuildingArea'">
                                    <el-input maxlength="14" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" v-model="propForm.floors[index].insideBuildingArea" placeholder="请输入层套内建筑面积">
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="层分摊建筑面积(m²)" :prop="'floors[' + index + '].contributionArea'" >
                                    <el-input maxlength="14" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" v-model="propForm.floors[index].contributionArea" placeholder="请输入层分摊建筑面积">
                                    </el-input>
                </el-form-item>-->
                <el-form-item label="层高(m)" :prop="'floors[' + index + '].floorHeight'">
                  <el-input
                    maxlength="5"
                    onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
                    v-model="propForm.floors[index].floorHeight"
                    placeholder="请输入层高"
                  ></el-input>
                </el-form-item>
                <div class="full">
                  <v-upload
                    type="image"
                    ref="buildingFiles"
                    :busId="propForm.floors[index].floorId"
                    @input="handleInput($event,index)"
                    :modelType="modelType"
                    @onSuccess="onSuccess($event,index)"
                    multiple
                    :autoLoadFiles="false"
                    v-model="item.uploadFileList"
                  />
                </div>
              </el-form>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div class="resource-manage" v-if="!isAdd">
      <div class="card-box">
        <div class="card-title">土地信息</div>
        <el-form ref="landInfo" class="form-wrap" label-position="top" size="small" :model="landInfo">
          <el-form-item label="宗地号">
            <span class="in_txt">{{landInfo.parcelNum}}</span>
          </el-form-item>
          <el-form-item label="宗地面积(m²)">
            <span class="in_txt">{{landInfo.parcelArea}}</span>
          </el-form-item>
          <el-form-item label="土地用途">
            <span class="in_txt">{{getCardTypeValue(landInfo.landUse,landUses)}}</span>
          </el-form-item>
          <el-form-item label="地址" class="full">
            <span class="in_txt">{{landInfo.address}}{{landInfo.addressInfo}}</span>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="resource-manage">
      <div class="card-box">
        <el-form size="small" class="but_form">
          <el-form-item class="col-two">
            <el-button type="primary" v-throttle="[() => submitForm('propForm')]">保存</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!-- 地图坐标选择弹窗 -->
    <positionDialog ref="positionDialog" @changeMessage="resetPosition" />
  </div>
</template>

<script src="./building_form.js">

</script>

<style lang="scss" scoped>
@import "./building_form";
</style>
